<template>
  <view class="warp">
    <view class="index_top">
      <view class="index_warp1">
        <u-swiper
          :list="list"
          :effect3d="true"
          height="397"
          :circular="false"
          effect3d-previous-margin="38"
          bgColor="none"
        ></u-swiper>
      </view>
    </view>

    <view class="goods_list_box">
      <view class="zx">
        <view class="name">咨询</view>

        <view>
          <view class="name">顺丰跳转链接</view>
          <view class="name">顺丰跳转链接</view>
        </view>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="goods_list_box">
      <view class="miaosha">
        <view class="goods_item">
          <navigator
            class="item"
            url="/pages/goods/classify"
            hover-class="none"
          >
            <image src="~@/static/jitai/pic/8889.jpg"></image>
            <view class="name">济态富氢水杯</view>
            <view class="price">￥1980.00</view>
          </navigator>
          <navigator
            url="/pages/goods/classify"
            class="item"
            hover-class="none"
          >
            <image src="~@/static/jitai/pic/0001.jpg"></image>
            <view class="name">济态富氢水杯</view>
            <view class="price">￥1980.00</view>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          image: "https://cdn.uviewui.com/uview/swiper/1.jpg",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/2.jpg",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
        {
          image: "https://cdn.uviewui.com/uview/swiper/3.jpg",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
      notice: [
        {
          id: "1",
          title: "昨夜星辰昨夜风，画楼西畔桂堂东",
        },
        {
          id: "2",
          title: "身无彩凤双飞翼，心有灵犀一点通",
        },
        {
          id: "3",
          title: "谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳",
        },
      ],
    };
  },

	onLoad(){
		this.getInfo()
	},
  methods: {
		getInfo(){
			this.$post('/12312312').then(res=>{
				console.log(res);
			})
		}
	},
};
</script>

<style lang="scss">
page {
  background: #f1f1f1;
}
.index_top {
  width: 100%;
  height: 470rpx;
  background: #fff;
}

.index_warp1 {
  width: 750rpx;
  height: 360rpx;
  position: relative;
  background-size: auto 100%;
  padding-top: 30rpx;
}
.logo {
  width: 187rpx;
  padding: 38rpx;

  image {
    width: 187rpx;
    height: 60rpx;
  }
}
.prize_box {
  width: 674rpx;
  height: 110rpx;
  background: rgba($color: #fff, $alpha: 0.3);
  border: 2rpx solid rgba(255, 255, 255, 0.6);
  padding: 0 30rpx;
  box-sizing: border-box;
  border-radius: 10rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 38rpx 28rpx 38rpx;

  .icon {
    color: #fff;
    .o {
      width: 200rpx;
      height: 34rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 24rpx !important;
    }
    .s {
      font-size: 28rpx;
    }
  }
  .p1 {
    background: url(~@/static/jitai/p_2.png) no-repeat left center;
    background-size: auto 90%;
    padding-left: 100rpx;
  }
  .p2 {
    background: url(~@/static/jitai/p_3.png) no-repeat left center;
    background-size: auto 100%;
    padding-left: 80rpx;
  }
}
.index_icon {
  width: 100%;
  background: #fff;
  display: flex;
  justify-content: space-between;
  padding: 28rpx 38rpx;

  .item {
    text-align: center;

    image {
      width: 86rpx;
      height: 86rpx;
      margin: 0 auto;
    }
  }
  .span {
    color: #a3a3a3;
  }
}
.goods_list_box {
  width: 100%;
  padding: 28rpx 28rpx 18rpx 28rpx;

  .miaosha {
    width: 100%;
    padding: 28rpx;
    background: #fff;
    border-radius: 20rpx;
    margin-bottom: 20rpx;
  }
}
.zx {
  width: 100%;
  padding: 28rpx;
  background: #fff;
  border-radius: 20rpx;
	display: flex;
	justify-content: space-around;
	align-content: center;
	align-items: center;
}

.goods_item {
  width: 100%;
  padding-top: 20rpx;
  display: flex;
  justify-content: space-between;

  .item {
    width: 308rpx;
    box-sizing: border-box;
    image {
      width: 308rpx;
      height: 308rpx;
      border-radius: 8rpx;
    }
    .name {
      font-size: 26rpx;
      color: #666;
      padding: 4rpx 0;
    }
    .price {
      font-size: 30rpx;
      font-weight: bold;
      color: #ffa911;
    }
  }
}
</style>
